<template>
  <div class="el-number-range">
    <el-input
      :value="minValue"
      :clearable="clearable"
      :placeholder="startPlaceholder"
      class="input-range-val input-range-val-start"
      size="small"
      type="number"
      oninput="if(value>999999999999)value=999999999999"
      @keydown.native="inputLimit"
      @input="onInput($event, maxValue)"
      @clear="clearfun"
      @mousewheel.native.prevent
      @change="onChange($event, maxValue)"
      @blur="onMinBlur">
      <span slot="suffix" class="unit-label">{{ unit }}</span>
    </el-input>
    <div class="separator">{{ separator }}</div>
    <el-input
      :value="maxValue"
      :clearable="clearable"
      :placeholder="endPlaceholder"
      class="input-range-val input-range-val-end"
      size="small"
      type="number"
      oninput="if(value>999999999999)value=999999999999"
      @keydown.native="inputLimit"
      @input="onInput(minValue, $event)"
      @clear="clearfun"
      @mousewheel.native.prevent
      @change="onChange(minValue, $event)"
      @blur="onMaxBlur">
      <span slot="suffix" class="unit-label">{{ unit }}</span>
    </el-input>
  </div>
</template>

<script>
export default {
  name: 'ElNumberRange',
  props: {
    /**
     * 最大值
     */
    max: {
      type: Number,
      default: Infinity
    },
    /**
     * 最小值
     */
    min: {
      type: Number,
      default: -Infinity
    },
    /**
     * 输入框宽度
     */
    clearable: {
      type: Boolean,
      default: false
    },
    /**
     * 输入框分隔符
     */
    separator: {
      type: String,
      default: '-'
    },
    unit: {
      type: String,
      default: ''
    },
    /**
     * 输入框默认值
     */
    value: {
      type: Array | String,
      default: () => []
    },
    startPlaceholder: {
      type: String,
      default: '最低金额'
    },
    endPlaceholder: {
      type: String,
      default: '最高金额'
    },
    onlyInteger: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const [minValue, maxValue] = this.value;
    return {
      minValue,
      maxValue
    };
  },
  watch: {
    // 同步max,min为传进来的value
    value(data) {
      const [minValue, maxValue] = data;
      this.minValue = minValue;
      this.maxValue = maxValue;
    }
  },
  methods: {
    onInput(min, max) {
      if (this.onlyInteger) {
        this.minValue = this.handleInput(min);
        this.maxValue = this.handleInput(max);
        this.$emit('input', [this.minValue, this.maxValue]);
        return;
      }
      this.$emit('input', [min, max]);
    },
    // 限制只能输入整数
    handleInput(e) {
      let value = String(e);
      value = value.split('.')[0];
      value = value.replace(/[^\-\d]/g, ''); // 只能输入-和数字
      value = value.replace(/\-{2,}/g, '-'); // -只能保留一个
      value = value.replace(/(\d)\-/g, '$1'); // 数字后面不能接-，不能出现类似-11-2,12-，11-23
      value = value.replace(/-(0+)/g, '0'); // 不能出现-0,-001,-0001类似
      value = value.replace(/^0+(\d)/, '$1'); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      value = value.replace(/(-?\d{15})\d*/, '$1'); // 最多保留15位整数
      return value ? Number(value) : '';
    },
    onChange(min, max) {
      min && max && this.$emit('onChange');
    },
    // min框失去焦点时若min>max,将min调小为
    onMinBlur(e) {
      // 输入是字符串
      let value = e.target.value;
      if (value) {
        const num = this.onlyInteger ? 0 : 2;
        value = Number(value).toFixed(num);
      }
      const max = this.maxValue || this.maxValue === 0 ? Number(this.maxValue) : undefined;
      // 空字符串
      if (!value && value !== 0) {
        this.emitInputNextTick([undefined, max]);
        return;
      }
      if (value > this.max) {
        value = this.max;
      }
      if (value < this.min) {
        value = this.min;
      }
      // undefined 不能比较
      if (max || max === 0) {
        value = Math.min(value, max);
      }
      this.emitInputNextTick([value, max]);
    },
    // max框失去焦点时若max<min, 则将max调大
    onMaxBlur(e) {
      let value = e.target.value;
      if (value) {
        const num = this.onlyInteger ? 0 : 2;
        value = Number(value).toFixed(num);
      }
      const min = this.minValue || this.minValue === 0 ? Number(this.minValue) : undefined;
      // 空字符串
      if (!value && value !== 0) {
        this.emitInputNextTick([min, undefined]);
        return;
      }
      if (value > this.max) {
        value = this.max;
      }
      if (value < this.min) {
        value = this.min;
      }
      // undefined 不能比较
      if (min || min === 0) {
        value = Math.max(value, min);
      }
      this.emitInputNextTick([min, value]);
    },
    emitInputNextTick(value = [undefined, undefined]) {
      this.$nextTick(() => {
        this.$emit('input', value);
      });
    },
    clearfun() {
      this.$emit('clear');
    },
    inputLimit(e) {
      const key = e.key;
      // 不允许输入'e'、'+'、'Shift'
      if (key === 'e' || key === '+' || key === 'Shift') {
        e.returnValue = false;
        return false;
      }
      return true;
    }
  }
};
</script>

<style lang="scss">
.el-number-range {
  display: flex;
  align-items: center;
  .separator {
    color: #888;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .input-range-val {
    width: 110px !important;
  }
}
</style>
